//-----------------------------------linear-gradient---------------------------------
@mixin linear-gradient($color1, $color2){
  background: $color1; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
  background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
}
//-----------------------------------隐藏文字-----------------------------------------
//引用例子：
//.logo{
//    background: url("logo.png");
//    height:100px;
//    width:200px;
//   @include hide-text;
//}

//-----------------------------------正三角-----------------------------------------
//正三角的通用属性
%triangleBase {
  _font-size: 0;
  _line-height: 0;
  _overflow: hidden;
  width: 0;
  height: 0;
}

//regulaTriangle:正三角(dashed默认透明)
//例子：@include regulaTriangle(top,red);
@mixin regulaTriangle($derection: bottom, $color: #000, $width: 20px) {
  @extend %triangleBase;
  border-width: $width;
  //向右
  @if $derection==right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
  }
  //向左
  @if $derection==left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
  }
  //向上
  @if $derection==top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
  }
  //向下
  @if $derection==bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
  }
}

//-----------------------------------边框阴影-----------------------------------------
//boxshadow:边框阴影
//例子：@include boxshadow();
@mixin boxshadow($x: 3px, $y: 3px, $s: 4px, $shadowcolor: #cccccc) {
  -moz-box-shadow: $x $y $s $shadowcolor; // FF3.5+
  -webkit-box-shadow: $x $y $s $shadowcolor; // Saf3.0+, Chrome
  box-shadow: $x $y $s $shadowcolor; // Opera 10.5, IE 9.0
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}');
  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}')";
  /* IE8 */
}

//-----------------------------------动画keyframes生成-----------------------------------------
//动画keyframes生成
//例子：@include keyframes(动画名称);
//@include keyframes(move-the-object) {
//    0% {
//        transform: translateX(0);
//    }
//    100% {
//        transform: translateX(200px);
//    }
//}
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}
// 适配高清屏
@mixin retina($path, $cap: 2, $size: auto auto, $extras: null) {
  /*
   * Set a counter and get the length of the image path.
   */
  $position: -1;
  $strpath: '#{$path}';
  $length: str-length($strpath);

  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  @for $i from $length through $length - 10 {
    @if $position == -1 {
      $char: str-slice($strpath, $i, $i);
      @if str-index($char, '.') == 1 {
        $position: $i;
      }
    }
  }

  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  @if $position != -1 {
    $ext: str-slice($strpath, $position + 1, $length);
    $base: str-slice($strpath, 1, $position - 1);
    $at1x_path: '#{$base}.#{$ext}';
    $at2x_path: '#{$base}@2x.#{$ext}';

    /*
     * Set a base background for 1x environments.
     */
    background: url('#{$at1x_path}') $extras;
    background-size: $size;

    /*
     * Create an @2x-ish media query.
     */
    @media all and (-webkit-min-device-pixel-ratio: 1.5),
      all and (-o-min-device-pixel-ratio: 3/2),
      all and (min--moz-device-pixel-ratio: 1.5),
      all and (min-device-pixel-ratio: 1.5) {
      background: url('#{$at2x_path}') $extras;
      background-size: $size;
    }

    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    @if $cap >= 2 {
      @for $env from 2 through $cap {
        $suffix: '@#{$env}x';
        @media (-webkit-min-device-pixel-ratio: $env),
          (min-resolution: $env * 96dpi) {
          background: url('#{$base}#{$suffix}.#{$ext}') $extras;
          background-size: $size;
        }
      }
    }

    /*
     * If anything went wrong trying to separate the file from its
     * extension, set a background value without doing anything to it.
     */
  } @else {
    background: url('#{$path}') $extras;
    background-size: $size;
  }
}
